<template>
  <view class="container">
    <ec-canvas
      id="mychart-dom-bar"
      
      canvas-id="mychart-bar"
      :ec="ec"
    ></ec-canvas>
  </view>
</template>
<script>
import * as echarts  from "../../components/ec-canvas/echarts";
export default {
  data() {
    return {
      ec: {
        onInit: this.initChart,
      },
    };
  },
  onLoad() {
    // this.initChart();
  },
  methods: {
    initChart(canvas, width, height, dpr) {
        console.log('initChart', canvas, width, height, dpr);
        
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr, // 像素比
      });
      canvas.setChart(chart);
      var option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };
      chart.setOption(option);
      return chart;
    },
  },
};
</script>
<style>
  .container {
    height: 100vh;
    width: 100vw;
  }
</style>